<template>
	<view class="network-select">
		<u-input @click="showPopup=true" :value="activeItem.label" type="select" placeholder="请选择登录环境" />
		<u-popup v-model="showPopup" mode="bottom" safe-area-inset-bottom @close="close">
			<view class="network-select-tip">环境选择</view>
			<view class="header">
				<u-search v-model="inputUrl" search-icon="edit-pen-fill" confirmType="done" placeholder="自定义请求地址"
					shape="square" input-align="center" height="80" action-text="添加" @custom="add()">
				</u-search>
			</view>
			<view class="item" v-for="(item,index) in listAll" :key="index" @click="select(item)">
				<view class="item-title">{{item.label}}</view>
				<view class="item-text">{{item.url}}</view>
				<view class="item-del" v-if="item.del" @click.stop="del(index)">
					<u-icon color="#ff0000" name="close"></u-icon>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 打开弹窗
				showPopup: false,
				// 显示的标题
				activeItem: {
					label: '',
					url: ''
				},
				// 默认的地址列表
				defaultList: [{
					label: '本地测试环境(46)',
					url: 'http://192.168.100.46:7070',
				}, {
					label: '线上测试环境',
					url: 'https://tmqas.xyspec.com/api',
				}, {
					label: '正式环境',
					url: 'https://tmprd.xyspec.com/api',
				}, ],
				// 用户自己添加的地址列表
				customList: [],
				// 输入框双向绑定值
				inputUrl: '',
				// 本地缓存的key
				baseUrlKey: 'bladex-baseUrl',
				baseUrlListKey: 'bladex-baseUrlList'
			};
		},
		computed: {
			// 合并后的列表
			listAll() {
				return this.defaultList.concat(this.customList)
			}
		},
		created() {
			// 首次合并且回显
			const urlList = uni.getStorageSync(this.baseUrlListKey);
			if (urlList) {
				this.customList = urlList;
			}
			const baseUrl = uni.getStorageSync(this.baseUrlKey);
			if (baseUrl) {
				const item = this.listAll.find(i => i.url === baseUrl);
				if (item) {
					this.select(item);
				} else {
					this.select(this.listAll[0]);
				}
			} else {
				this.select(this.listAll[0]);
			}
		},
		methods: {
			// 选择
			select(item) {
				this.activeItem = item;
				uni.setStorageSync(this.baseUrlKey, item.url);
				this.showPopup = false;
			},
			// 增加
			add() {
				const reg = /^(http|https)\:\/\//
				if (!this.inputUrl || !reg.test(this.inputUrl)) {
					return uni.showToast({
						title: '输入的地址格式错误',
						icon: 'none'
					})
				}
				let index = 1
				const len = this.customList.length
				if (len > 0) {
					const lastItem = this.customList[len - 1]
					const lastIndex = lastItem.label.replace('用户自定义地址', '')
					if (/[0-9]/.test(lastIndex)) {
						index = Number(lastIndex) + 1
					}
				}
				this.customList.push({
					label: `用户自定义地址${index}`,
					url: this.inputUrl,
					del: true
				})
				this.inputUrl = ''
				uni.setStorageSync(this.baseUrlListKey, this.customList);
				this.select(this.customList[len])
			},
			// 删除
			del(index) {
				const len = this.defaultList.length
				this.customList.splice(index - len, 1)
				uni.setStorageSync(this.baseUrlListKey, this.customList);
			},
			// 关闭popup前判断当前的选项是否被删除掉了。
			close() {
				const item = this.listAll.find(item => {
					return item.label === this.activeItem.label && item.url === this.activeItem.url
				})
				if (!item) {
					this.select(this.listAll[0]);
				}
			}
		}
	}
</script>

<style lang="scss">
	.network-select {
		width: 100%;
	}

	.network-select-tip {
		text-align: center;
		font-size: 24rpx;
		padding: 10rpx;
	}

	.header {
		border-bottom: 1rpx solid #eee;
		padding: 10rpx 20rpx;
	}

	.item {
		width: 100%;
		border-bottom: 1px solid #eee;
		padding: 20rpx 0;
		text-align: center;
		position: relative;

		.item-title {
			font-size: 30rpx;
		}

		.item-text {
			font-size: 24rpx;
			color: #999;
		}

		.item-del {
			position: absolute;
			right: 20rpx;
			top: 50%;
			transform: translateY(-50%);
		}
	}
</style>
